<template>
  <div style="width: 100%;height: 100%;">
    <el-backtop :bottom="60"></el-backtop>
    <el-page-header style="margin-top: 10px" @back="goBack" content="文章详情"></el-page-header>
    <div style="padding-top: 20px;  border-radius: 10px; margin-top: 10px">
      <h2 style="color: black; padding-left: 10px; text-align: center">{{article.title}}</h2><br/>
      <div style="text-align: center">
        <span>{{article.date}}</span> <span>{{article.author}}</span>
      </div>
  <!--    虚线-->
      <hr/>
      <div class="wrapper" v-html="article.content"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Article",
  data() {
    return {
      article: [],
    }
  },
  created() {
    console.log(this.$route.query)
    this.request.post("/information/findById?id=" + this.$route.query ).then(res => {
      console.log(res)
      this.article = res
      this.article.content = this.article.content.replace(/<img/g,"<img style='display:block;width:30%;height:auto;margin:0 auto;'");
    })
  },
  methods: {
    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
::v-deep img{
  width:100px;
  height: 100px;
}
.wrapper{
  white-space: pre-wrap;
}

</style>
